<template>
	<view class="page">
		<view class="main">
			<!-- 知识点区域 -->
			<view class="bg-white padding">
				<u-text color="#333333" size="32rpx" text="知识点"></u-text>
				<view class="knowledge-content">
					<u-text size="28rpx" text="10以内加减法"></u-text>
				</view>
			</view>

			<!-- 更改掌握率区域 -->
			<view class="padding bg-white margin-top-sm" @click="showMasteryPicker">
				<!-- <view class="flex-1"> -->
				<u-text color="#333333" size="32rpx" text="更改掌握率"></u-text>
				<view class="knowledge-content">
					<u-text size="28rpx" :text="selectedMastery + '%'"></u-text>
				</view>
				<!-- </view> -->
				<!-- <view class="flex justify-end">
					<u-text size="32rpx" v-if="selectedMastery" :text="selectedMastery + '%'"></u-text>
					<u-icon name="arrow-down" size="28rpx" color="#999"></u-icon>
				</view> -->
			</view>
		</view>
		<!-- 底部保存按钮 -->
		<view class="footer">
			<u-button type="primary" shape="circle" size="large" color="#FFA726" text="保存" @click="saveMasteryRate">
			</u-button>
		</view>

		<!-- 掌握率选择器 -->
		<u-picker ref="masteryPicker" :show="showPicker" :columns="masteryOptions" @confirm="confirmMastery"
			@cancel="cancelPicker" keyName="label">
		</u-picker>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 页面数据
const selectedMastery = ref('60')
const showPicker = ref(false)
const knowledgePoint = ref('10以内加减法')

// 掌握率选项
const masteryOptions = ref([
	[
		{ label: '0%', value: 0 },
		{ label: '10%', value: 10 },
		{ label: '20%', value: 20 },
		{ label: '30%', value: 30 },
		{ label: '40%', value: 40 },
		{ label: '50%', value: 50 },
		{ label: '60%', value: 60 },
		{ label: '70%', value: 70 },
		{ label: '80%', value: 80 },
		{ label: '90%', value: 90 }
	]
])

// 方法
const showMasteryPicker = () => {
	showPicker.value = true
}

const confirmMastery = (value) => {
	selectedMastery.value = value.value[0].value
	showPicker.value = false
}

const cancelPicker = () => {
	showPicker.value = false
}

const saveMasteryRate = () => {
	if (!selectedMastery.value && selectedMastery.value !== 0) {
		uni.showToast({
			title: '请选择掌握率',
			icon: 'none'
		})
		return
	}

	uni.showModal({
		title: '确认保存',
		content: `确定将"${knowledgePoint.value}"的掌握率更改为${selectedMastery.value}%吗？`,
		success: (res) => {
			if (res.confirm) {
				// 这里可以调用API保存掌握率
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})

				// 延迟返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}
	})
}

onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options

	if (options.knowledge) {
		knowledgePoint.value = decodeURIComponent(options.knowledge)
	}
	if (options.currentRate) {
		selectedMastery.value = parseInt(options.currentRate)
	}

	console.log('更改掌握率页面加载完成', options)
})
</script>

<style scoped lang="scss">
.update-mastery-page {
	background-color: #F5F5F5;
	min-height: 100vh;
	padding: 0;
}

/* 知识点区域 */
.knowledge-section {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.section-title {
	padding: 32rpx 32rpx 24rpx 32rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.title-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.knowledge-content {
	background: #F7F7F7;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	margin-top: 20rpx;
}

.knowledge-text {
	font-size: 32rpx;
	color: #333333;
}

/* 更改掌握率区域 */
.mastery-section {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.mastery-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.mastery-label {
	font-size: 32rpx;
	color: #333333;
}

.selector-right {
	display: flex;
	align-items: center;
}

.mastery-value {
	font-size: 32rpx;
	color: #333333;
	margin-right: 16rpx;
}

/* 底部保存按钮 */
.save-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32rpx;
	background-color: #FFFFFF;
	border-top: 1rpx solid #F0F0F0;
}
</style>
